const debounce = (fun:any, delay = 500, before:(p: any)=>void) => {
  let timer: null | number = null
  return (params: any) => {
    timer && window.clearTimeout(timer)
    before && before(params)
    timer = window.setTimeout(() => {
       // click事件fun是Function  input事件fun是Array
      if (!Array.isArray(fun)) {
        fun = [fun]
      }
      for (let i in fun) {
        fun[i](params)
      }
      timer = null
    }, delay)
  }
}
import { h } from "vue"

// 组件中的template -----> 渲染函数render -----> 虚拟dom 

// 函数式组件
function Debounce(props: { before: any; time: any }, context: { slots: { default: () => any } }) {

  const before = props.before // 可选项，之前要做的事
  const time = props.time  // 防抖的时间间隔

  // 找到默认插槽
  const vnodeList = context.slots.default()
  if (vnodeList === undefined){
    console.warn('<debounce> 组件必须要有子元素')
    return null
  }
  // const vnode = vnodeList[0] || null // 获取子元素虚拟dom
  vnodeList.forEach((vnode: { type: string; props: { onClick: (params: any) => void } }) => {
    if (vnode.type === 'button') {
      // 改写 按钮上的点击事件的回调函数
  
      // 1. 原来的回调函数
      const defaultFun = vnode.props.onClick
      // 2. 改写之后的： 添加了防抖处理的
      const debounceFun = debounce(defaultFun, time, before) 
      // 3. 写回去
      vnode.props.onClick = debounceFun
    } else {
      console.warn('<debounce> 组件内只能出现下面组件的任意一个且唯一 el-button、el-input、button、input')
    }
  })
  return h('div', {}, vnodeList);
}
export default Debounce;